<template>
  <el-card class="box-card">
    <div class="flex">
      <XForm class="w-[560px]" ref="form" :fieldList="fieldList" :options="formOption" :formData="info.stocking_rules" :originOption="originOption">
        <template #date>
          <FormItem label="重点" prop="safe_days_important" label-width="100px" class="w-[400px]">
            <el-input v-model="info.stocking_rules.safe_days_important" placeholder="重点" oninput="value=value.replace(/[^\d]/g, '')">
              <template #append>天</template>
            </el-input>
          </FormItem>
          <FormItem label="正常" prop="safe_days_normal" label-width="100px" class="w-[400px]">
            <el-input v-model="info.stocking_rules.safe_days_normal" placeholder="正常" oninput="value=value.replace(/[^\d]/g, '')">
              <template #append>天</template>
            </el-input>
          </FormItem>
          <FormItem label="新品" prop="safe_days_new" label-width="100px" class="w-[400px]">
            <el-input v-model="info.stocking_rules.safe_days_new" placeholder="新品" oninput="value=value.replace(/[^\d]/g, '')">
              <template #append>天</template>
            </el-input>
          </FormItem>
        </template>
        <!-- 平台上架天数 -->
        <template #PlatformIssuedDays>
          <div v-for="(item, key) in info.stocking_rules?.platform_issued_days" :key="key" class="flex items-center mb-[8px]">
            <el-select v-model="item.site_code" placeholder="请选择" clearable style="width: 330px">
              <el-option v-for="item in originOption.amazonSite" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>

            <el-input v-model="item.days" placeholder="请输入天数" oninput="value=value.replace(/[^\d]/g, '')" class="mx-[8px]" style="width: 200px" />

            <div @click="add('platform_issued_days')" class="dk-iconfont icon-CirclePlus cursor-pointer"></div>
            <div v-if="info.stocking_rules?.platform_issued_days.length > 1" @click="dtl('platform_issued_days', key)" class="dk-iconfont icon-CircleMinus ml-2 cursor-pointer"></div>
          </div>
        </template>
        <!-- 运输天数（美国） -->
        <template #Transport>
          <div v-for="(item, key) in info.stocking_rules?.transport_config" :key="key" class="flex items-center mb-[8px]">
            <Cascader v-model:modelValue="item.departments" type="department" class="w-[330px]" :formItem="{ itemProps: { checkStrictly: true } }" />
            <el-select v-model="item.area" placeholder="请选择" style="width: 200px" class="h-[32px] mx-[8px]" clearable>
              <el-option v-for="item in countryOpt" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div @click="add('transport_config')" class="dk-iconfont icon-CirclePlus cursor-pointer"></div>
            <div v-if="info.stocking_rules?.transport_config.length > 1" @click="dtl('transport_config', key)" class="dk-iconfont icon-CircleMinus ml-2 cursor-pointer"></div>
          </div>
        </template>
      </XForm>
      <div class="pt-[40px] ml-[16px] flex flex-1">
        <div class="w-[50px]">说明</div>
        <div class="flex-1">
          <p v-for="val in explain" :key="val" class="my-[8px]">{{ val }}</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, ref, toRefs } from "vue"
import XForm from "@/components/XForm/index.vue"
import FormItem from "@/components/XForm/FormItem.vue"
import Cascader from "@/components/XForm/components/Cascader/index.vue"
import { tmsopts } from "@/api"
const props = defineProps({
  info: { type: Object, default: () => {} },
})

const countryOpt = ref([])
const add = (key) => {
  props.info.stocking_rules?.[key].push({ departments: [], area: "" })
}
const dtl = (key, idx) => {
  props.info.stocking_rules?.[key].splice(idx, 1)
}

import { getAmazonSite } from "@/utils/enumUtils"
const getOption = async () => {
  originOption.value.amazonSite = await getAmazonSite()
  let conf_country_region = await tmsopts({ params: ["conf_country_region"] })
  countryOpt.value = conf_country_region.data?.conf_country_region?.filter((v) => v.country_code == "US")
}

//获取下拉数据
onMounted(async () => {
  getOption()
})
const form = ref()
const originOption = ref({})

const formOption = ref({
  inline: false,
  labelWidth: "160px",
  rules: {
    stocking_days: [{ required: true, message: "请选择", trigger: "change" }],
  },
})
const dayConfig = {
  append: "天",
  type: "inputNumber",
  precision: 0,
  style: { width: "330px" },
  appendStyle: { padding: "0 20px" },
}
const fieldList = ref([
  { type: "title", label: "备货规则设置" },
  { field: "stocking_days", label: "备货天数", ...dayConfig },
  { field: "purchase_processing_days", label: "采购处理天数", ...dayConfig },
  { field: "local_processing_days", label: "本地仓处理天数", ...dayConfig },
  { field: "overseas_processing_days", label: "海外中转仓处理天数", ...dayConfig },
  // { field: "platform_issued_days", label: "平台上架天数", ...dayConfig },
  { label: "安全天数", slot: "date" },
  { field: "procurement_frequency", label: "采购频次", ...dayConfig },

  { label: "平台上架天数", slot: "PlatformIssuedDays" },

  { label: "运输天数（美国）", slot: "Transport" },
])
const explain = [
  "备货天数：系统检测到需要补货时，系统计算默认需求数量；",
  "基础LT天数 = 采购处理天数 + 采购天数 + 本地仓处理天数 + 运输天数 + 海外中转仓处理天数 + 平台上架天数 + 安全天数；",
  "采购处理天数：采购下单与公司内部审核流程的时间；",
  "采购天数：包含采购下单，供应商生产，供应商运输天数；",
  "本地仓处理天数：国内本地仓入库、贴标、打包出库的天数；",
  "运输天数：头程运输到平台仓库签收的天数；",
  "海外中转仓处理天数 : 海外仓中转仓入库、贴标、打包出库的天数；",
  "平台上架天数 ：平台仓库入库上架的天数；",
  "安全天数：为防止断货，增加额外备货库存；",
  "采购频次：备货分析更新的频率；",
]
defineExpose({ form })
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 8px;
}
.inline-form {
  .el-input {
    width: 60px;
  }
}
</style>
